import React,{ Component } from 'react';
import { Table } from 'antd';
import './style.css';

class AntdTable extends Component {
	constructor(props){
		super(props);
		this.state = {

		}
	}

	render(){
		const columns = [
		  {
		    title: 'Full Name',
		    width: 100,
		    dataIndex: 'name',
		    key: 'name',
		    fixed: 'left',
		  },
		  {
		    title: 'Age',
		    width: 100,
		    dataIndex: 'age',
		    key: 'age',
		    fixed: 'left',
		  },
		  {
		    title: 'Column 1',
		    dataIndex: 'address',
		    key: '1',
		    width: 150,
		  },
		  {
		    title: 'Column 2',
		    dataIndex: 'address',
		    key: '2',
		    width: 150,
		  },
		  {
		    title: 'Column 3',
		    dataIndex: 'address',
		    key: '3',
		    width: 150,
		  },
		  {
		    title: 'Column 4',
		    dataIndex: 'address',
		    key: '4',
		    width: 150,
		  },
		  {
		    title: 'Column 5',
		    dataIndex: 'address',
		    key: '5',
		    width: 150,
		  },
		  {
		    title: 'Column 6',
		    dataIndex: 'address',
		    key: '6',
		    width: 150,
		  },
		  {
		    title: 'Column 7',
		    dataIndex: 'address',
		    key: '7',
		    width: 150,
		  },
		  { title: 'Column 8', dataIndex: 'address', key: '8' },
		  {
		    title: 'Action',
		    key: 'operation',
		    fixed: 'right',
		    width: 100,
		    render: () => <a href='www.baidu.com'>action</a>,
		  },
		];
		const data = [];
		for (let i = 0; i < 100; i++) {
		  data.push({
		    key: i,
		    name: `Edrward ${i}`,
		    age: 32,
		    address: `London Park no. ${i}`,
		  });
		}
		return (
			<div>
				<Table
					className="table"
					columns={columns}
					dataSource={data}
					scroll={{ x: 1800, y: 300 }}
				/>
			</div>
		)
	}
}

export default AntdTable;